<template>
	<view class="page-box">
		<view class="form-item-box" v-for="(item,index) in listData" :key='index'>
			<view :class="item.label == '税号' ? 'label-new-box' : 'label-box'">
				{{item.label}}
			</view>
			<input v-if="item.type=='input'" class="input-box" focus :placeholder="form.type == '1' ? item.placeholder : item.placeholder1"
				:maxlength='item.maxlength || 140' v-model="form[item.value]"/>
			<view class="radio-box" v-else>
				<view class="radio-item-box">
					<view class="pitch-box" v-if="form.type == '1'" @click="radioClick('2')">
						<u-icon name="checkmark" color='#fff' class="icon-box" ></u-icon>
					</view>
					<view class="un-pitch-box" v-else @click="radioClick('1')">
					</view>
						企业
				</view>
				<view class="radio-item-box">
					<view class="pitch-box" v-if="form.type == '2'" @click="radioClick('1')">
						<u-icon name="checkmark" color='#fff' class="icon-box" ></u-icon>
					</view>
					<view class="un-pitch-box" v-else @click="radioClick('2')">
					</view>
						个人
				</view>
			</view>
		</view>
		<view class="remark-box">
			电子发票预计在3-5个工作日发送至邮箱
		</view>
		<view class="save-btn-box" @click="saveClick">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					type:'1',
					amount:'',
					header_name:'',
					tax_no:'',
					content:'',
					email:''
				},
				listData: [{
						label: '发票类型',
						value: 'paymentCode',
						type: 'radio',
						maxlength: 6,
						display: true
					},
					{
						label: '发票抬头',
						placeholder: '请输入公司全称',
						placeholder1: '请输入个人姓名',
						value: 'confirmPassword',
						type: 'input',
						display: true,
						value:'header_name'
					},
					{
						label: '税号',
						placeholder: '请输入纳税人识别号',
						placeholder1: '请输入纳税人识别号',
						value: 'confirmPassword',
						type: 'input',
						display: true,
						value:'tax_no'
					},
					{
						label: '发票内容',
						placeholder: '请输入发票内容',
						placeholder1: '请输入发票内容',
						value: 'confirmPassword',
						type: 'input',
						display: true,
						value:'content'
					},
					{
						label: '发票金额',
						placeholder: '请输入发票金额',
						placeholder1: '请输入发票金额',
						value: 'confirmPassword',
						type: 'input',
						display: true,
						value:'amount'
					},
					{
						label: '电子邮箱',
						placeholder: '请输入您的电子邮箱',
						placeholder1: '请输入您的电子邮箱',
						value: 'verificationCode',
						type: 'input',
						display: true,
						value:'email'
					}
				]
			}
		},
		methods: {
			radioClick(val){
				if (val == '1') {
					let obj = {
						label: '税号',
						placeholder: '请输入纳税人识别号',
						placeholder1: '请输入纳税人识别号',
						value: 'confirmPassword',
						type: 'input',
						display: true,
						value:'tax_no'
					}
					this.listData.splice(2, 0, obj)
					this.form ={
						type:val,
						amount:'',
						header_name:'',
						tax_no:'',
						content:'',
						email:''
					}
				} else {
					this.listData.splice(2, 1)
					this.form ={
						type:val,
						amount:'',
						header_name:'',
						content:'',
						email:''
					}
				}
			},
			saveClick(){
				console.log(this.form,'------form')
				// openInvoice
				let params = Object.assign({},this.form);
				let self = this
				self.$https(
					'mine.openInvoice',
					params,
					'加载中...'
				).then(res => {
					if (res.code === 1) {
						this.$u.toast('开票成功');
						uni.navigateBack({
							delta: 1
						});
					}else{
						this.$u.toast(res.msg);
					}
				});
			}
		}
	}
</script>

<style scoped lang='scss'>
	.page-box {
		width: 100%;
		height: 100vh;
	}

	.form-item-box {
		width: 100%;
		height: 108rpx;
		padding: 0rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.label-new-box {
		width: 160rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #42494F;
	}

	.label-box {
		width: 160rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #42494F;
	}

	.label-box:before {
		content: '*';
		color: red;
		display: inline-block;
		  width: 0px;
		  height: 100%;
		  vertical-align: middle;
		  margin-right: 18rpx;
	}

	.input-box {
		width: calc(100% - 180rpx);
		height: 100%;
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}

	.radio-box {
		width: calc(100% - 180rpx);
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
.radio-item-box{
	margin-left: 30rpx;
	width: 140rpx;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.pitch-box{
		width: 40rpx;
		height: 40rpx;
		background-color: #FC5351;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon-box{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.un-pitch-box{
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		opacity: 1;
		border: 1px solid #999999;
		border-radius: 40rpx;
	}
}
	}
.remark-box{
	width: 100%;
	height: 76rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 30rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
}
	.save-btn-box {
		margin-top: 200rpx;
		margin-left: 5%;
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background: #FD8E8A linear-gradient(180deg, #FC5351 0%, #FF6E6D 100%);
		border-radius: 70rpx;
		opacity: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.uni-checkbox-input-checked,
		.uni-radio-input-checked,
		.uni-switch-input-checked {
			background-color:#FC5351 !important;
			border-color: #FC5351 !important;
			color: #fff !important;
	    }
	uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		 border-color: #FC5351;
	}
</style>
